<template>
	<!-- 外层包装 -->
	<view class="index-all-wrap">
		
		<cu-custom :isBack="false" textColor="#32383D">
			<block slot="backText">返回</block>
		</cu-custom>
		
		<view class="search-all-wrap" style=" padding-top: 10rpx;padding-bottom: 10rpx; margin-bottom: 18rpx;">
			<view class="search-wrap" @click="search">
				<image class="search_home" src="../../static/search_home.png"></image>
				<input 
					class="uni-input" 
					style="background-color: #FFFFFF;"
					confirm-type="search" 
					placeholder="寻找你想要的课程"
					placeholder-style="color:#C7C7C7;" />
			</view>
			<view class="search-wrap-right" @click="search" style="position: relative;
    left: -13rpx;">搜索</view>
		</view>
		
		
		<!-- 轮播图 -->
		<view class="index-banner-wrap" style="margin: 0 auto; width: 95%;">
			<swiper class="index-banner swiper" 
					:indicator-dots="indicatorDots" 
					indicator-active-color="#3694EF"
					:autoplay="autoplay" 
					:interval="interval"
					:duration="duration"
					 circular>
				<swiper-item @click="viewContentInfo(item.lunboKechengId)" v-for="(item, index) in bannerList" :key="index"style="border-radius: 20rpx;" >
					<image class="index-banner-img" :src="item.lunboImageUrl" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		

		<view class="course-list-wrap">
			<view class="live-title-wrap">
				<!-- 标题 更多 -->
				<image class="search_home" src="../../static/black/kedan@2x.png" style="padding: 4rpx;"></image>
				<text class="live-title">热门课程</text>
				<text @click="contentmore('remen')" class="live-more" >
					查看更多
					<text class="iconfont icon-jinrujiantou c-more-icon"></text>
				</text>
			</view>
			<!-- 直播课列表 -->
			<view class="course-wrap">
				<view @click="viewContentInfo(item.kechengId)" 
						class="live-list" v-for="(item, index) in liveList" 
						:key="index"
						style="height: 240rpx;"
						>
					<view class="live-list-img-wrap" style="margin-top: 37rpx;">
						<image class="live-list-img" :src="item.kechengImg" mode="aspectFill"></image>
						<text class="course-title-icon">视频</text>
					</view>
					<view class="live-list-info">
						<view class="live-c-title" style="height: 40rpx;">{{item.kechengName}}</view>
						<view class="live-status-tuwen">热门推荐</view>
						<view class="live-teacher-price">
							<image class="live-teacher-avatar" :src="item.teacherImg" mode="aspectFill"></image>
							<text class="teacher-name">{{item.kechengTeacher}}</text>
							<view class="price-wrap" style="padding: 2rpx;">
								<text class="free">免费</text>
							</view>
						</view>
						<view class="" style="color: rgb(102, 102, 102);">{{item.showDetp}}</view>
					</view>
				</view>
				<view class="listline"></view>
			</view>
		</view>
			
		<!-- 系列课程列表区 -->
		<view class="course-list-wrap" style="padding-top: 0rpx;">
			<!-- 精选内容 -->
			<view class="la-wrap">
				<view class="live-title-wrap">
					<!-- 标题 更多 -->
					<image class="search_home" src="../../static/black/shuji@2x.png" style=""></image>
					<text class="live-title" >系列课程</text>
					<text @click="contentmore('xilie')" class="content-more" style="font-size: 23rpx;">查看更多&nbsp;<text class="iconfont icon-jinrujiantou c-more-icon"></text></text>
				</view>
			</view>
			<view class="course-wrap">
				<view @click="viewContentInfo(item.kechengId)" 
						class="live-list" v-for="(item, index) in xilieList" 
						:key="index"
						style="height: 240rpx;"
						>
					<view class="live-list-img-wrap"  style="margin-top: 37rpx;">
						<image class="live-list-img" :src="item.kechengImg" mode="aspectFill"></image>
						<text class="course-title-icon">视频</text>
					</view>
					<view class="live-list-info">
						<view class="live-c-title"  style="height: 40rpx;">{{item.kechengName}}</view>
						<view class="live-status-tuwen live-status-tuwen1">系列课程</view>
						<view class="live-teacher-price">
							<image class="live-teacher-avatar" :src="item.teacherImg" mode="aspectFill"></image>
							<text class="teacher-name">{{item.kechengTeacher}}</text>
							<view class="price-wrap">
								<text class="free">免费</text>
							</view>
						</view>
						<view class="" style="color: rgb(102, 102, 102);">{{item.showDetp}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	
	const app = getApp();
	export default {
		data() {
			return {
				bannerList: [], // 轮播图片列表
				indicatorDots: true, // 轮播图，是否显示面板指示点
				autoplay: true, // 轮播图，是否自动切换
				interval: 2000, //轮播图，自动切换时间间隔
				duration: 500, //轮播图，滑动动画时长
				
				liveList: [], // 热门课程列表
				xilieList: [], // 系列课程列表	
				
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				theme: app.globalData.theme.backgroundColor, //全局颜色变量
			}
		},
		// 加载页面数据
		onShow: function() {
			this.getData();
			this.getStorageToglobalData();
		},
		methods: {
			getStorageToglobalData(){
				
				let userinfoStorage = uni.getStorageSync('userinfo');
				let userinfoglobal = app.globalData.userinfo;
				if(
				   !((userinfoglobal.userId != null && userinfoglobal.userId != "" && userinfoglobal.userId != undefined)
				   &&
				   (userinfoglobal.llyId != null && userinfoglobal.llyId != "" && userinfoglobal.llyId != undefined)
				   &&
				   (userinfoglobal.studentId != null && userinfoglobal.studentId != "" && userinfoglobal.studentId != undefined))
				){
					if(userinfoStorage != null && userinfoStorage != "" && userinfoStorage != undefined){
						app.globalData.userinfo = uni.getStorageSync('userinfo');
					}
				}
				
			},
			//获取数据
			getData() {
				//获取分类
				uni.request({
					url: app.globalData.serve_study_url + 'getIndexData',
					data: {
					},
					success: (res) => {
						let data = res.data.data;
						//轮播图片
						this.bannerList = data.lunboList;
						// 热门课程列表
						this.liveList = data.kechengTuijianList;
						// 系列课程列表				
						this.xilieList = data.kechengList;
					}
				});
				uni.request({
					url: app.globalData.serve_system_url + 'aboutList',
					method: 'GET',
					data: {
					},
					success: res => {			
						app.globalData.aboutPhone = (res.data.rows)[0].aboutPhone
					},
				});
			
			},
			// 跳搜索
			search() {
				uni.navigateTo({
					url: "../search/search"
				})
			},	
			// 系列课程-更多
			contentmore(str) {
				uni.navigateTo({
					url: '../content-more/content-more?str=' + str,
				});
			},
			// 跳转看课页面
			viewContentInfo(kechengId) {
				uni.navigateTo({
					url: '../../packageB/pages/content-info/content-info?kechengId=' + kechengId,
				});
			},
			
		}
	}
</script>

<style>
	@import url("/static/css/index.css");
	@import url("/static/css/search/search.css");
	@import url("/static/css/course_list.css");
	page {
		overflow: scroll; /*页面禁止滑动*/
		background: radial-gradient(circle farthest-side at 0 0,rgb(214, 244, 254) 0%,rgb(255, 255, 255) 100%) no-repeat;
	}
	.search_home{
		margin-top: 11rpx;
	}
	.search-wrap {
		width: 75%;
		height: 100%;
		line-height: 85rpx;
		border-radius: 15rpx;
		/* margin-left: 20rpx; */
		margin: 0 5%;
		padding-left: 20rpx;
		background-color: #FFFFFF;
		padding-top: 6rpx;
	}

	.search-wrap text,
	.search-wrap input {
		float: left;
		background-color: #F5F5F5;
		height: 100%;
		padding: 0;
	}

	.search-wrap text {
		margin-right: 20rpx;
		color: #C7C7C7;
	}

	.search-wrap input {
		width: 70%;
	}
	.search-all-wrap{
		display: flex;
		align-items: center;
	}
	.search-wrap-right{
		width: 40px;
		color: #3694EF;
	}
	.free{
		padding-left: 20rpx;
		padding-top: 7rpx;
		background-color: rgb(234, 255, 244);
		height: 45rpx;
		width: 70rpx;
		line-height: 40rpx;
		border-radius: 11rpx;
	}
	.c-more-icon {
		position: relative;
		top: 5rpx;
	}
	
	.live-status-tuwen{
		color: rgb(227, 100, 82);
		background-color: rgb(255, 237, 220);
		border: none;
		width: 87rpx;
	}
	.live-status-tuwen1{
		color: rgb(103, 167, 238);
		background-color: rgb(233, 243, 250);
		border: none;
		width: 87rpx;
	}
	.live-more {
		font-size: 23rpx;
		right: 29rpx !important;
	}

	.content-more {
		right: 29rpx !important;
	}

	.course-list-wrap .course-wrap {
		width: 98% !important;
		padding-bottom: 0 !important;
	}

	.course-list-wrap {
		margin: 0rpx;
		padding: 6% 1% 6% 1%;
		/* background-color: #FFFFFF; */
	}

	.price-wrap {
		padding-right: 16rpx !important;
	}
	.course-list-wrap .course-wrap{
		box-shadow: none;
	}
</style>